<template>
    <div class="OwnerInformation">
        <div class="OwnerInformationheader">
            <p>
                <i class="el-icon-arrow-left"></i>
                <span>车位信息</span>
            </p>
        </div>
        <div class="OwnerInformationcontent">
            <ul class="baseinformation">
                <li>
                    <div class="title">
                        所属小区
                    </div>
                    <div class="contenct">
                        {{this.Belongingcommunity}}
                    </div>
                </li>
                <li>
                    <div class="title">
                        车库名称
                    </div>
                    <div class="contenct">
                        {{this.Garagename}}
                    </div>
                </li>
                <li>
                    <div class="title">
                        车库类别
                    </div>
                    <div class="contenct">
                        {{this.Garagecategory}}
                    </div>
                </li>
                <li>
                    <div class="title">
                        车库编号
                    </div>
                    <div class="contenct">
                        {{this.Garagenumber}}
                    </div>
                </li>
            </ul>
            <ul class="baseinformation">
                <li>
                    <div class="title">
                        楼宇名称
                    </div>
                    <div class="contenct">
                        {{this.Buildingname}}
                    </div>
                </li>
                <li>
                    <div class="title">
                        车库区域
                    </div>
                    <div class="contenct">
                        {{this.Garagearea}}
                    </div>
                </li>
                <li>
                    <div class="title">
                        车位面积
                    </div>
                    <div class="contenct">
                        {{this.Parkingspacearea}}
                    </div>
                </li>
                <li>
                    <div class="title">
                        备注
                    </div>
                    <div class="contenct">
                        {{this.note}}
                    </div>
                </li>
            </ul>
        </div>
        <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
            <span>当前未绑定业主信息，请绑定后查看</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data(){
        return{
            Belongingcommunity:' ',
            Buildingname:'  ',
            Garagename:'',
            Garagearea:'  ',
            Garagecategory:'  ',
            Parkingspacearea:'  ',
            Garagenumber:'  ',
            note:'',
            dialogVisible:false
        }
    },
    methods:{
        handleClose(done) {
            this.$confirm('确认关闭？')
            .then(_ => {
                done();
            })
            .catch(_ => {});
        }
    },
    mounted(){
        if(this.$route.query.data){
            this.$axios.post('http://127.0.0.1/parkinglotselect',{
                date:this.$route.query.data.date
            }).then(res=>{
                if(res.data.data==''){
                    this.dialogVisible=true
                }else{
                    this.Belongingcommunity=this.$route.query.data.Belongingcommunity
                    this.Buildingname=this.$route.query.data.Buildingname
                    this.Garagearea=res.data.data[0].ParkinglotNumber.split('-')[0]+'区'
                    this.Garagenumber=res.data.data[0].ParkinglotNumber
                    this.Parkingspacearea=res.data.data[0].ParkinglotErea
                    this.Garagecategory='人防车库'
                    this.Garagename='地下车库'
                }
            }).catch(err=>{
                console.log(err)
            })
        }else{
            this.dialogVisible=true
        }
    }
}
</script>

<style lang="scss" scoped>
    .OwnerInformation{
        width: 100%;
        padding: 10px 30px 30px;
        .OwnerInformationheader{
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            color: #666;
            font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
            font-weight: 700;
            .el-icon-arrow-left{
                margin-right: 5px;
                color: #666 !important;
                font-weight: 700 !important;
            }
            .el-icon-arrow-lefts{
                color: #FF3B30;
            }
        }
        .OwnerInformationcontent{
            width: 100%;
            display: flex;
            .baseinformation{
                width: 600px;
                li{
                    display: flex;
                    align-items: center;
                    font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
                    font-weight: 700;
                    font-style: normal;
                    font-size: 12px;
                    color: #666666;
                    .title{
                        width: 120px;
                        height: 40px;
                        line-height: 40px;
                        text-align: right;
                        padding-right: 20px;
                        background-color: #f5f5f5;
                        border: 1px solid rgb(233, 233, 233);
                        box-sizing: border-box;
                    }
                    .contenct{
                        width: 480px;
                        height: 40px;
                        line-height: 40px;
                        padding-left: 20px;
                        font-weight: 400;
                        box-sizing: border-box;
                        border: 1px solid rgb(233, 233, 233);
                    }
                }
            }
        }
    }
</style>